<template>
  <el-footer class="footer">
    <div class="footer-content">
      <div class="footer-section">
        <h3>关于我们</h3>
        <div class="link-list">
          <a href="#">公司介绍</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
          <a href="#">用户协议</a>
          <a href="#">隐私政策</a>
        </div>
        <div class="nav-links">
          <a href="#">帮助中心</a>
          <span class="divider">|</span>
          <a href="#">意见反馈</a>
          <span class="divider">|</span>
          <a href="#">投诉建议</a>
        </div>
        <div class="contact-info">
          <p>联系电话：400-123-4567</p>
          <p>邮箱：support@example.com</p>
          <p>地址：重庆市某某区某某街道123号</p>
        </div>
        <div class="copyright">
          © 2024 在线学习平台 版权所有
        </div>
      </div>
      
      <div class="qr-code">
        <img :src="qrCodeUrl" alt="微信公众号">
        <p>扫码关注公众号</p>
      </div>
    </div>
  </el-footer>
</template>

<script>
export default {
  name: 'CommonFooter',
  data() {
    return {
      qrCodeUrl: 'https://via.placeholder.com/120'
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  background-color: #2F3B4B;
  padding: 40px 0;
  height: auto !important;
  
  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    
    .footer-section {
      flex: 1;
      padding: 0 20px;
      
      h3 {
        color: #fff;
        font-size: 16px;
        margin-bottom: 15px;
      }
      
      .link-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        
        a {
          color: #a1a9b3;
          text-decoration: none;
          font-size: 14px;
          
          &:hover {
            color: #fff;
          }
        }
      }
      
      .nav-links {
        margin: 15px 0;
        
        a {
          color: #a1a9b3;
          text-decoration: none;
          font-size: 14px;
          
          &:hover {
            color: #fff;
          }
        }
        
        .divider {
          margin: 0 10px;
        }
      }
      
      .contact-info {
        margin: 15px 0;
        
        p {
          color: #a1a9b3;
          font-size: 14px;
        }
      }
      
      .copyright {
        color: #a1a9b3;
        font-size: 14px;
      }
    }
    
    .qr-code {
      flex: 1;
      text-align: center;
      
      img {
        width: 120px;
        height: 120px;
      }
      
      p {
        color: #a1a9b3;
        font-size: 14px;
      }
    }
  }
}
</style> 